<html>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>S.Calendar Demo</title>
    <script src="../../../../g.tbcdn.cn/kissy/k/1.3.1/seed.js" tppabs="http://g.tbcdn.cn/kissy/k/1.3.1/seed.js" data-config="{combine:true}"></script>

    <link
            href="../../../../g.tbcdn.cn/kissy/k/1.3.1/css/dpl/--base.css,badges.css,forms.css,icons.css,labels.css,tables.css-20130815" tppabs="http://g.tbcdn.cn/kissy/k/1.3.1/css/dpl/??base.css,badges.css,forms.css,icons.css,labels.css,tables.css?20130815"
            rel="stylesheet"/>
    <link
            href="../../../../g.tbcdn.cn/kissy/k/1.3.1/fi000001.css" tppabs="http://g.tbcdn.cn/kissy/k/1.3.1/??button/assets/dpl.css,calendar/assets/dpl.css,menu/assets/dpl.css,combobox/assets/dpl.css,menubutton/assets/dpl.css,overlay/assets/dpl.css,split-button/assets/dpl.css,tabs/assets/dpl.css,toolbar/assets/dpl.css,tree/assets/dpl.css?20130815"
            rel="stylesheet"/>

    <link href="../assets/docs.css" tppabs="http://docs.kissyui.com/1.3/dpl/assets/docs.css" rel="stylesheet"/>
    <link rel="stylesheet" href="../assets/prettify.css" tppabs="http://docs.kissyui.com/1.3/dpl/assets/prettify.css">
    <script type="text/javascript" src="../assets/prettify.js" tppabs="http://docs.kissyui.com/1.3/dpl/assets/prettify.js"></script>

</head>
<body onload="prettyPrint()">
<div class="container">
    <h1>KISSY Calendar</h1>
    <hr size=1/>
    <div class="row-fluid">
        <div class="span14">
            <h3>静态日历，以及单击回调</h3>

            <div id="J_Calendar"></div>
            <br/>
            <a id="J_CalendarRemove" class="ks-button">J_CalendarRemove</a>
            <hr size=1/>
            <h3>静态双月日历,默认选中某日</h3>

            <div id="J_MultiPage_1"></div>
            <hr size=1/>
            <h3>静态三月日历</h3>
            可以支持无数多个月的日历,只需增加css中的相应容器宽度
            <div id="J_MultiPage_2"></div>
            <hr size=1/>
            <h3>日历日期范围,以及选择范围的回调</h3>

            <div id="J_Range"></div>
            <hr size=1/>
            <h3>日历日期范围,指定默认范围</h3>

            <div id="J_DefaultRange"></div>
            <hr size=1/>
            <h3>日历切换事件</h3>
            只要当前月份切换，就发生monthChange事件
            <div id="J_AllEvents"></div>
            <hr size=1/>
            <h3>Popup日历，默认点击触发，点击空白处关闭</h3>
            <input type="text" id="J_Popup" style="margin-left:50px;"/>
            <hr size=1/>
            <h3>Popup日历，默认点击触发，选择范围</h3>
            <input type="text" id="J_Popup2" style="margin-left:50px;"/>
            <hr size=1/>
            <h3>Popup日历，默认点击触发，选择范围但是日历不联动</h3>
            <input type="text" id="J_Popup22" style="margin-left:50px;"/>
            <hr size=1/>
            <h3>Popup日历，默认点击触发，多选范围</h3>
            <input type="text" id="J_Popup23" style="margin-left:50px;"/>
            <hr size=1/>
            <h3>Popup日历，单击文档关闭，focus事件触发时弹出日历</h3>
            <a href="javascript:void(0);" id="J_PopupClosable" style="margin-left:50px;" tabindex="0">click here!</a>
            <hr size=1/>
            <h3>Popup日历，对齐方式配置</h3>
            <input type="text" id="J_PopupAlign" style="margin-left:200px;"/>
            <hr size=1/>
            <h3>日历可操作范围</h3>

            只可以选择今日之后的十天以内的日期
            <div id="J_MinDateMaxDate"></div>
            <hr size=1/>
            <h3>日历某些天禁止操作</h3>

            只可以选择今日之后的十天以内的日期
            <div id="J_DisabledDate"></div>
            <hr size=1/>
            <h3>可选择时间</h3>
            每个面板的time选择永远保持一致，而且当选择范围的时候，起始time和结束time是一致的
            <div id="J_WithTime"></div>
            <hr size=1/>
            <h3>可选择不限</h3>
            出现不限的按钮点击后触发select事件，参数为null
            <div id="J_NotLimited"></div>
            <hr size=1/>
            <h3>起始星期自定义</h3>
            起始星期可以自定义，指定参数startDay:0-6,默认为0，从星期日开始
            <div id="J_CustomDay"></div>
            <hr size=1/>
            <h3>更多定制</h3>
            <input type="text" value="" class="ks-select-calendar" id="J_SelectResult" name="">
            <hr size=1/>
            <h3>日期格式的自定义</h3>
            日期格式的自定义是在一个单独的模块中date-format，和Calendar无关,这里只是一个示例
            <br/>
            请选择要输出的日期格式
            <select id="J_DateType">
                <option value="custom" selected>custom</option>
                <option value="default">default</option>
                <option value="shortDate">shortDate</option>
                <!--<option value="mediumDate">mediumDate</option>-->
                <option value="longDate">longDate</option>
                <option value="fullDate">fullDate</option>
                <option value="shortTime">shortTime</option>
                <!--<option value="mediumTime">mediumTime</option>-->
                <option value="longTime">longTime</option>
                <option value="isoDate">isoDate</option>
                <option value="isoTime">isoTime</option>
                <option value="isoDateTime">isoDateTime</option>
                <option value="isoUTCDateTime">isoUTCDateTime</option>
                <option value="localShortDate">localShortDate</option>
                <option value="localShortDateTime">localShortDateTime</option>
                <option value="localLongDate">localLongDate</option>
                <option value="localLangDateTime">localLangDateTime</option>
                <option value="localFullDate">localFullDate</option>
                <option value="localFullDateTime">localFullDateTime</option>
            </select>
            custom自定义格式 <input type=text value="yyyy/mm/dd HH:MM:ss" id="J_CustomType"/>

            <div id="J_DateFormat"></div>            
        </div>
        <div class="span10">
            <pre class="prettyprint linenums">
var S = KISSY;
var c = {};
var showdate = function (n, d) {
    //计算d天的前几天或者后几天，返回date,注：chrome下不支持date构造时的天溢出
    var uom = new Date(d - 0 + n * 86400000);
    uom = uom.getFullYear() + "/" + (uom.getMonth() + 1) + "/" + uom.getDate();
    return new Date(uom);
};

KISSY.ready(function (S) {
    KISSY.use('node,calendar', function (S, Node, Calendar) {
        var S_Date = S.Date;
        var i = 0;
        //静态日历,单击回调
        var cr = new Calendar('#J_Calendar').on('select', function (e) {
            alert(e.date);
        }, {
            popup: false
        });
        S.one('#J_CalendarRemove').on('click', function () {
            cr.destroy();
        });
        
        //静态双月日历,默认选中某日
        c = new Calendar('#J_MultiPage_1', {
            pages: 2,
            selected: showdate(-2, new Date()),
            popup: false
        });

        
        //静态三月日历
        new Calendar('#J_MultiPage_2', {
            pages: 3,
            popup: false
        });
        
        //选择范围,并绑定范围回调
        new Calendar('#J_Range', {
            pages: 2,
            rangeSelect: true,
            popup: false
        }).on('rangeSelect', function (e) {
                    alert(e.start + ' ' + e.end);
                });
        
        //选择范围,指定默认范围
        new Calendar('#J_DefaultRange', {
            pages: 2,
            rangeSelect: true,
            popup: false,
            range: {
                start: showdate(-3, new Date()),
                end: showdate(5, new Date())
            }
        });
        
        //月份切换事件
        new Calendar('#J_AllEvents', {
            popup: false
        }).on('monthChange', function (e) {
                    alert('切换事件,月份切换到' + (e.date.getMonth() + 1));
                });
        
        //Popup日历,默认点击触发
        new Calendar('#J_Popup', {
            popup: true,
            triggerType: ['click'],
            closable: true
        }).on('select', function (e) {
                    Node.one('#J_Popup').val(S_Date.format(e.date, 'localFullDate'));
                });
        
        //Popup日历,默认点击触发,选择范围
        var k3 = new Calendar('#J_Popup2', {
            popup: true,
            triggerType: ['click'],
            closable: false,
            pages: 2,
            rangeSelect: true,
            showTime: true
        }).on('rangeSelect', function (e) {
                    alert(e.start + ' ' + e.end);
                    k3.hide();
                });
        

        //Popup日历,默认点击触发,选择范围,日历不联动
        var k2 = new Calendar('#J_Popup22', {
            popup: true,
            triggerType: ['click'],
            closable: false,
            pages: 2,
            rangeSelect: true,
            rangeLinkage: false
        }).on('rangeSelect', function (e) {
                    alert(e.start + ' ' + e.end);
                    k2.hide();
                });
        
        //Popup日历,默认点击触发,选择范围
        var k = new Calendar('#J_Popup23', {
            popup: true,
            triggerType: ['click'],
            closable: false,
            pages: 2,
            multiSelect: true,
            rangeLinkage: false
        }).on('multiSelect', function (e) {
                    alert(e.multi);
                    k.hide();
                });
        

        //Popup日历,单选关闭
        new Calendar('#J_PopupClosable', {
            popup: true,
            closable: true,
            triggerType: ['focus']
        }).on('select', function (e) {
                    alert(e.date);
                });
        
        //Popup日历,默认点击触发
        new Calendar('#J_PopupAlign', {
            align: {
                points: ['br', 'tr'],
                offset: [0, 0]
            },
            popup: true,
            triggerType: ['click'],
            closable: true
        }).on('select', function (e) {
                    Node.one('#J_Popup').val(S_Date.format(e.date, 'localFullDate'));
                });
        
        //日历可操作范围
        c = new Calendar('#J_MinDateMaxDate', {
            minDate: new Date(),
            maxDate: showdate(10, new Date()),
            popup: false
        });
        
        //某些天禁止操作
        c = new Calendar('#J_DisabledDate', {
            disabled: [showdate(1, new Date()), showdate(-1, new Date()), showdate(3, new Date()), showdate(5, new Date())],
            popup: false
        });
        
        //日历可选择time
        c = new Calendar('#J_WithTime', {
            showTime: true,
            popup: false
        }).on('timeSelect', function (e) {
                    alert(e.date);
                });
        
        //日历可选择不限
        c = new Calendar('#J_NotLimited', {
            notLimited: true,
            popup: false
        }).on('select', function (e) {
                    alert(e.date);
                });
        
        //可以自定义起始日期
        c = new Calendar('#J_CustomDay', {
            startDay: 1,
            popup: false
        });
        

        //更多定制
        c = new Calendar('#J_SelectResult', {
            popup: true
        });
        
        //格式化时间类型
        c = new Calendar('#J_DateFormat', {
            showTime: true,
            popup: false
        }).on('timeSelect', function (e) {
                    var type = Node.one('#J_DateType').val();
                    if (type == 'custom') {
                        type = Node.one('#J_CustomType').val();
                    }
                    alert(S_Date.format(e.date, type));
                });
        
    });
});
            </pre>            

        </div>

    </div>

    <hr size=1/>
    <script>

        var S = KISSY;
        //    S.log(S.Calendar);
        //    S.log(S.Date);

        var c = {};
        var showdate = function (n, d) {//计算d天的前几天或者后几天，返回date,注：chrome下不支持date构造时的天溢出
            var uom = new Date(d - 0 + n * 86400000);
            uom = uom.getFullYear() + "/" + (uom.getMonth() + 1) + "/" + uom.getDate();
            return new Date(uom);
        };

        KISSY.ready(function (S) {
            KISSY.use('node,calendar', function (S, Node, Calendar) {
                var S_Date = S.Date;
                var i = 0;
                //静态日历,单击回调
                var cr = new Calendar('#J_Calendar').on('select', function (e) {
                    alert(e.date);
                }, {
                    popup: false
                });
                S.one('#J_CalendarRemove').on('click', function () {
                    cr.destroy();
                });
                // S.log(++i);
                //静态双月日历,默认选中某日
                c = new Calendar('#J_MultiPage_1', {
                    pages: 2,
                    selected: showdate(-2, new Date()),
                    popup: false
                });

                // S.log(++i);
                //静态三月日历
                new Calendar('#J_MultiPage_2', {
                    pages: 3,
                    popup: false
                });
                // S.log(++i);
                //选择范围,并绑定范围回调
                new Calendar('#J_Range', {
                    pages: 2,
                    rangeSelect: true,
                    popup: false
                }).on('rangeSelect', function (e) {
                            alert(e.start + ' ' + e.end);
                        });
                // S.log(++i);
                //选择范围,指定默认范围
                new Calendar('#J_DefaultRange', {
                    pages: 2,
                    rangeSelect: true,
                    popup: false,
                    range: {
                        start: showdate(-3, new Date()),
                        end: showdate(5, new Date())
                    }
                });
                // S.log(++i);
                //月份切换事件
                new Calendar('#J_AllEvents', {
                    popup: false
                }).on('monthChange', function (e) {
                            alert('切换事件,月份切换到' + (e.date.getMonth() + 1));
                        });
                // S.log(++i);
                //Popup日历,默认点击触发
                new Calendar('#J_Popup', {
                    popup: true,
                    triggerType: ['click'],
                    closable: true
                }).on('select', function (e) {
                            Node.one('#J_Popup').val(S_Date.format(e.date, 'localFullDate'));
                        });
                // S.log(++i);
                //Popup日历,默认点击触发,选择范围
                var k3 = new Calendar('#J_Popup2', {
                    popup: true,
                    triggerType: ['click'],
                    closable: false,
                    pages: 2,
                    rangeSelect: true,
                    showTime: true
                }).on('rangeSelect', function (e) {
                            alert(e.start + ' ' + e.end);
                            k3.hide();
                            //Node.one('#J_Popup').val(S_Date.format(e.date,'localFullDate'));
                        });
                // S.log(++i);

                //Popup日历,默认点击触发,选择范围,日历不联动
                var k2 = new Calendar('#J_Popup22', {
                    popup: true,
                    triggerType: ['click'],
                    closable: false,
                    pages: 2,
                    rangeSelect: true,
                    rangeLinkage: false
                }).on('rangeSelect', function (e) {
                            alert(e.start + ' ' + e.end);
                            k2.hide();
                            //Node.one('#J_Popup').val(S_Date.format(e.date,'localFullDate'));
                        });
                // S.log(++i);
                //Popup日历,默认点击触发,选择范围
                var k = new Calendar('#J_Popup23', {
                    popup: true,
                    triggerType: ['click'],
                    closable: false,
                    pages: 2,
                    multiSelect: true,
                    rangeLinkage: false
                }).on('multiSelect', function (e) {
                            alert(e.multi);
                            k.hide();
                            //Node.one('#J_Popup').val(S_Date.format(e.date,'localFullDate'));
                        });
                // S.log(++i);

                //Popup日历,单选关闭
                new Calendar('#J_PopupClosable', {
                    popup: true,
                    closable: true,
                    triggerType: ['focus']
                }).on('select', function (e) {
                            alert(e.date);
                        });
                // S.log(++i);
                //Popup日历,默认点击触发
                new Calendar('#J_PopupAlign', {
                    align: {
                        points: ['br', 'tr'],
                        offset: [0, 0]
                    },
                    popup: true,
                    triggerType: ['click'],
                    closable: true
                }).on('select', function (e) {
                            Node.one('#J_Popup').val(S_Date.format(e.date, 'localFullDate'));
                        });
                // S.log(++i);
                //日历可操作范围
                c = new Calendar('#J_MinDateMaxDate', {
                    minDate: new Date(),
                    maxDate: showdate(10, new Date()),
                    popup: false
                });
                // S.log(++i);
                //某些天禁止操作
                c = new Calendar('#J_DisabledDate', {
                    disabled: [showdate(1, new Date()), showdate(-1, new Date()), showdate(3, new Date()), showdate(5, new Date())],
                    popup: false
                });
                // S.log(++i);
                //日历可选择time
                c = new Calendar('#J_WithTime', {
                    showTime: true,
                    popup: false
                }).on('timeSelect', function (e) {
                            alert(e.date);
                        });
                // S.log(++i);
                //日历可选择不限
                c = new Calendar('#J_NotLimited', {
                    notLimited: true,
                    popup: false
                }).on('select', function (e) {
                            alert(e.date);
                        });
                // S.log(++i);
                //可以自定义起始日期
                c = new Calendar('#J_CustomDay', {
                    startDay: 1,
                    popup: false
                });
                // S.log(++i);

                //更多定制
                c = new Calendar('#J_SelectResult', {
                    popup: true
                });
                // S.log(++i);
                //格式化时间类型
                c = new Calendar('#J_DateFormat', {
                    showTime: true,
                    popup: false
                }).on('timeSelect', function (e) {
                            var type = Node.one('#J_DateType').val();
                            if (type == 'custom') {
                                type = Node.one('#J_CustomType').val();
                            }
                            alert(S_Date.format(e.date, type));
                        });
                // S.log(++i);
            });
        });
    </script>
</div>
</body>
</html>
